<template>
    <div class="date_parent">
        <v-calendar :attributes='attrs' class="date_picker"></v-calendar>
        <ul>
            <li v-for="t in titles" :key="t" v-on:click="itemClick(t)">{{t}}</li>
        </ul>

    </div>

</template>
<script>


export default {
    name :'date-list',
    components:{},
    data(){
        return {
            attrs: [
                {
                    key: 'today',
                    highlight: {
                    backgroundColor: '#ff8080',
                    // Other properties are available too, like `height` & `borderRadius`
                    },
                    dates: new Date()
                }
            ],
            titles:[
              "hehlahl",
              "asdhadakd",
              "adadaddd",  
            ]
        }
    },
    methods:{
        itemClick(msg){
        console.log('-------------msg-----------------'+msg)
        }
    }
}
</script>
<style lang="less" scoped>
.date_parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  margin-top: 1px;
  height: 100%;
  background: #efefef;
  box-shadow: 2px 1px 1px #a8a8a8;
  .date_picker {
    margin-top: 20px;
  }
  ul{
      width: 250px;
      padding: 0;
      li{
          margin-top: 10px;
          list-style: none
        
      }
  }
}
</style>
